<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../jquery-validation-1.9.0/jquery.validate.js"></script>
</head>
<style>
    .error{
        color: red;
    }
</style>
<body>
<form action="https://www.baidu.com" id="form">
    姓名：<input type="text" name="name"><br><br>
    密码：<input type="text" id="pwd" name="pwd"><br><br>
    确认密码：<input type="text" id="pwd1"  name="pwd1"><br><br>
    年龄：<input type="text" name="age"><br><br>
    性别：<input type="radio"  name="sex">男<input  type="radio"  name="sex">女
    <label  for="sex" class="error" style="display: none;">必选字段</label>
    <br><br>
    爱好：<input type="checkbox" name="hobby">篮球
         <input type="checkbox" name="hobby">学习
         <input type="checkbox" name="hobby">看书
    <label  for="hobby" class="error" style="display: none;">必选字段</label>
    <br><br>
    出生日期：<input type="text" id="birth" name="birthday" placeholder="年/月/日">
    <br><br>
    学历：<select name="edu" id="edu">
        <option value="">--请选择学历--</option>
        <option value="1">专科</option>
        <option value="2">本科</option>
        <option value="3">研究生</option>
        <option value="4">硕士</option>
    </select>
    <br><br>
    邮箱：<input type="text" name="email">
    <br><br>
    身份证：<input type="text" name="ID" id="id">
    <br><br>
    说明：<textarea name="textarea" id="" cols="30" rows="5">

        </textarea>
    <br><br>
    <input type="submit" \><br><br>
</form>
</body>
</html>
<script type="text/javascript">
    $(function () {
            $.validator.addMethod("formatB",function (value,element,params) {
                    var reg = /^\d{4}[/]{1}\d{2}[/]{1}\d{2}$/;
                    return reg.test($("#birth").val())
            });
            $.validator.addMethod("ID",function () {
                var reg = /^[0-9]{17,24}[x]{1}|[0-9]{1}&/
                return reg.test($("#birth").val())
            })
        $("#form").validate({
            rules:{
                name:"required",
                pwd:{
                    required:true,
                    rangelength:[6,6]
                },
                pwd1:{
                    required:true,
                    rangelength:[6,6],
                    equalTo:"#pwd"
                },
                age:{
                    required:true,
                    range:[0,150]
                },
                sex:{
                    required:true
                },
                birthday:{
                    required:true,
                    formatB:true
                },
                hobby:{
                    required:true
                },
                edu:{
                    required:true
                },
                textarea:{
                    required:true
                },
                ID:{
                    required:true,
                    rangelength:[18,25]
                },
                email:{
                    required:true
                }
            },
            messages:{
                name:{
                    required:"你没的名字吗？"
                },
                pwd:{
                    required:"密码都记不住？",
                    rangelength:"六位数呢哥哥"
                },
                pwd1:{
                    equalTo:"密码都能不一样",
                    rangelength:"六位数呢哥哥"
                },
                age:{
                    required:"你要修仙?",
                    range:"太大了"
                },
                birthday:{
                    formatB:"生日格式都不会？"
                },
                hobby:{
                    required:"哥哥没爱好吗"
                },
                edu:{
                    required:"哥哥高中没毕业吗"
                },
                textarea:{
                    required:"说明填一填"
                },
                ID:{
                    required:"哥哥交出身份证",
                    rangelength:"位数不对"
                },
                email:{
                    required:"邮箱格式不对"
                }
            }


        });
    });

</script>